<template>
  <basic-container>
    <div class="receiving-container">
      <el-row>
        <el-col>
          <avue-form ref="properties" v-model="model" :option="option">
            <template slot="menuForm">
              <div style="float: right; margin-right: 70px">
                <el-button type="primary" @click="submit">开始统计</el-button>
              </div>
            </template>
          </avue-form>
        </el-col>
      </el-row>
    </div>
  </basic-container>
</template>
<script>
import CryptoJS from 'crypto-js';
import website from '@/config/website';

export default {
  components: {},
  mounted() {},
  data() {
    return {
      model: {},
      option: {
        labelWidth: '130',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '开始时间',
            prop: 'create_time',
            type: 'date',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            rules: [
              {
                required: true,
                message: '请输入开始时间',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '结束时间',
            prop: 'planEndDate',
            type: 'date',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            rules: [
              {
                required: true,
                message: '请输入结束时间',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '产品编码',
            prop: 'productCode',
            rules: [
              {
                required: true,
                message: '请输入产品编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '产品名称',
            prop: 'productName',
            rules: [
              {
                required: true,
                message: '请输入产品名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '车间',
            prop: 'type',
            type: 'select',
            dicData: [
              {
                label: '有供应商',
                value: 'YES'
              },
              {
                label: '无供应商',
                value: 'NO'
              }
            ],
            rules: [
              {
                required: true,
                message: '请输入选择类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '产线',
            prop: 'type',
            type: 'select',
            dicData: [
              {
                label: '有供应商',
                value: 'YES'
              },
              {
                label: '无供应商',
                value: 'NO'
              }
            ],
            rules: [
              {
                required: true,
                message: '请输入选择类型',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    };
  },
  computed: {},
  methods: {
    submit() {
      let attribute = this.model;
      let done;
      this.$refs.properties.validate((valid, done) => {
        done = done;
        if (valid) {
          /**
           *  目前由于大屏与saber无法集成为一个项目，而且目前我们需要的功能展示为条件查询展示图表，而在大屏配置中目前无法支持动态配参，因此考虑
           * 使用路由传递参数，在大屏项目进行解析，当call api或者 sql时，可动态赋值，目前对生成的条件进行Base64加密传值
           * 1529298682594201602 => 这个是指目前我们创建的大屏id，创建之后可以拿到
           */
          let params = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(attribute)));
          params = encodeURIComponent(params);
          window.open(`${website.avueDataUrl}/view/1534808948553089025`);
          done();
        } else {
          return false;
        }
      });
    }
  },
  watch: {}
};
</script>

<style scoped>
.receiving-container {
  height: 83vh;
}
</style>
